import React from 'react';
import './index.less';
import { Button } from 'antd-mobile';
import { inject, observer } from 'mobx-react';
import { useParams } from 'react-router-dom';
import { changeLanguage } from '../../utils/language';
import Title from '../../components/title';

const list: string[] = ['en', 'ch']; // 英语,中文
function Language(props: any) {
  console.log('language-demo', props);
  const { languageStore } = props;

  const routeParams: any = useParams();
  const routeTitle = routeParams.title;

  function turnLanguage(props: string) {
    console.log(props);
    languageStore.setLanguage(props);
    changeLanguage(props);
  }
  return (
    <div className='language-demo'>
      <Title title={routeTitle} left={true} />

      <p style={{ display: 'none' }}>{languageStore.language}</p>
      {list.map((item, index) => {
        return (
          <Button color='primary' key={index} onClick={() => turnLanguage(item)}>
            {item}
          </Button>
        );
      })}
    </div>
  );
}
export default inject('languageStore', 'rtlStore')(observer(Language));
/**
 * react只有在页面上的数据发生改变时，才会引起页面的重新加载，
 * 在本页面也使用和app.tsx一样的inject+observer来实现数据的响应式变化
 */
